<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <title>省级日度回收走势</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('报表管理','省级日度回收走势')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">月度订单走势</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form id="queryForm" th:action="@{flow}" method="post">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                            <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                <input id="selmonth" th:name="month" class="form-control input-sm" type="text" th:value="${month}" readonly="readonly" placeholder="成交开始时间" />
                                <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                            </div>

                            <!--<shiro:hasRole name="sys_nationwide">

                            </shiro:hasRole>-->
                            <input type="hidden" th:name="userId" th:value="${session.authUser.userId}"/>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询
                                </button>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>

                <div id="main" class="box-body" style="height:400px;">

                </div>
            </div>


            <!--<div class="box">-->

                <!--&lt;!&ndash; /.box-header &ndash;&gt;-->
                <!--<div class="box-body">-->
                    <!--<table id="dataTable" class="table table-bordered table-hover" style="font-size: small">-->

                        <!--<thead >-->
                        <!--<tr style="background: #eaf8ff">-->
                            <!--<th colspan="3" >区域</th>-->
                            <!--<th colspan="3" >客户</th>-->
                            <!--<th colspan="3" >门店</th>-->
                            <!--<th colspan="3" >工号</th>-->
                            <!--<th colspan="4" >门店活跃</th>-->
                            <!--<th colspan="5" >回收明细</th>-->
                            <!--<th colspan="3" >差错率</th>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<th>大区</th>-->
                            <!--<th>省份</th>-->
                            <!--<th>负责人</th>-->
                            <!--<th>总客户数</th>-->
                            <!--<th>产量客户</th>-->
                            <!--<th>客户产能</th>-->
                            <!--<th>已开门店</th>-->
                            <!--<th>产量门店</th>-->
                            <!--<th>门店产能</th>-->
                            <!--<th>已开工号</th>-->
                            <!--<th>产量工号</th>-->
                            <!--<th>工号产能</th>-->
                            <!--<th>回收15台以上门店</th>-->
                            <!--<th>活跃天数超过15天门店</th>-->
                            <!--<th>僵尸门店</th>-->
                            <!--<th>未成交订单门店数</th>-->
                            <!--<th>合计回收量</th>-->
                            <!--<th>合计回收金额</th>-->
                            <!--<th>月均回收单价</th>-->
                            <!--<th>5元机</th>-->
                            <!--<th>10元机</th>-->
                            <!--<th>差错台数</th>-->
                            <!--<th>差错额</th>-->
                            <!--<th>差错率(%)</th>-->
                        <!--</tr>-->
                        <!--</thead>-->
                    <!--</table>-->
                <!--</div>-->


                <!--&lt;!&ndash; /.box-body &ndash;&gt;-->
            <!--</div>-->
            <!-- /.box -->
        </div>

    </div>

    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <script>

        $('.form_date').datetimepicker({
            format: 'yyyy-mm',
            autoclose: true,
            todayBtn: true,
            startView: 'year',
            minView:'year',
            maxView:'decade',
            language:  'zh-CN',
            startDate:'2017-06',
            endDate:new Date()
        });

        $(function () {

            var chart = echarts.init(document.getElementById('main'), 'shine');


            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: '月度订单量走势'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {},
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    data:[]
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: []

            };


            // 使用刚指定的配置项和数据显示图表。
            chart.setOption(option);
            window.onresize = chart.resize;


            // 异步加载数据
            getdata();


            function getdata(){
                chart.showLoading();
                $.post( 'flow',
                        $("#queryForm").serialize(),
                        function (datas) {
                            var data = $.parseJSON(datas);
                            var arencyName = [];
                            var arrayObj = [];
                            $.each(data.orders, function (index, obj) {
                                arencyName.push(obj.provinceName);
                                arrayObj.push({
                                    name: obj.provinceName,
                                    type: 'line',
                                    data: obj.goodsSum,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                });
                            });
                            var month = $('#selmonth').val();
                            chart.hideLoading();
                            // 填入数据
                            chart.setOption({
                                title: {
                                    subtext: month
                                },
                                legend: {
                                    data: arencyName
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: data.day
                                },
                                series: arrayObj
                            });
                        });
            }




//            var tables = $("#dataTable").dataTable({
//
//                serverSide: true,//分页，取数据等等的都放到服务端去
//                processing: true,//载入数据的时候是否显示“载入中”
//                pageLength: 10,  //首次加载的数据条数
//                ordering: false,//排序操作在服务端进行，所以可以关了。
//                bPaginate:false,
//                autoWidth: false,
//                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
//                searching: false,
//                scrollX:2600,
//                info:false,
//                ajax: {   //类似jquery的ajax参数，基本都可以用。
//                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
//                    url: "/rp/order/total",
//                    dataSrc: "",//默认data，也可以写其他的，格式化table的时候取里面的数据
//                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
//                        var param = {}; //因为服务端排序，可以新建一个参数对象
//                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
//                        formData.forEach(function (e) {
//                            param[e.name] = e.value;
//                        });
//                        return param;//自定义需要传递的参数。
//                    }
//                },
//                columns: [//对应上面thead里面的序列
//                    {"data": 'supervisorName'},
//                    {"data": 'provinceName'},
//                    {"data": 'manager'},
//                    {"data": 'kaTotal',defaultContent: "0"},
//                    {"data": 'kaAdd', defaultContent: "0"},
//                    {"data": 'kaPercent'},
//                    {"data": 'storeTotal'},
//                    {"data": 'storeAdd'},
//                    {"data": 'storePercent',defaultContent: "0"},
//                    {"data": 'empTotal', defaultContent: "0"},
//                    {"data": 'empAdd'},
//                    {"data": 'empPercent'},
//                    {"data": 'countStore'},
//                    {"data": 'activeStore',defaultContent: "0"},
//                    {"data": 'unactiveStore',defaultContent: "0"},
//                    {"data": 'untransStore',defaultContent: "0"},
//                    {"data": 'goodsSum', defaultContent: "0"},
//                    {"data": 'amountSum'},
//                    {"data": 'averagePrice'},
//                    {"data": 'mobileSum'},
//                    {"data": 'smartSum',defaultContent: "0"},
//                    {"data": 'errorTotal', defaultContent: "0"},
//                    {"data": 'errorAmount', defaultContent: "0"},
//                    {"data": 'errorPercent', defaultContent: "0"},
//                ],
//
//                language: {
//                    lengthMenu: "",//不显示记录条数选择
//                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
//                    processing: "加载中",//处理页面数据的时候的显示
//
//                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
//                    //下面三者构成了总体的左下角的内容。
//                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
//                  //  info: "",
//                   // infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
//                   // infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
//                  //  sSearch: "关键字："
//                }
//
//            });
//
//            $('#btn-query').on("click", function () {
//                $("#dataTable").dataTable().fnDraw(false);
//                getdata();
//            });

        })



    </script>


</div>


</body>
</html>
